import { createStore } from 'vuex'
import {CHANGE_INFO } from './mutation_type'
import homeModule from './module/home'
export default createStore({
  state: {
    counter: 1,
    name:"inzv",
    level:100,
    avatarUrl:"https://image2.cdn.seaart.ai/2023-07-16/45631034998853/567227b7a2194a3314d0eba62a081ff2eaee6e9e.png",
    users:[
      {id:111,name:"tom",age:18},
      {id:112,name:"jerry",age:12},
      {id:113,name:"alis",age:16},
      
    ],
    // 服务器数据
    banner:[],
    recommend:[]
  },
  getters: {
    doubleCounter(state){
      return state.counter*2
    },
    totalAge(state){
      return state.users.reduce((preValue,item)=>{
        return preValue + item.age
      }, 0)
    },
    message(state,getters){
      // 在该getters属性中，获取其他的getters
      return `name:${state.name} level:${state.level} totalAge:${getters.totalAge}`
    },
    // 返回函数
    getUserById(state){
      return function(id){
        const friend = state.users.find(item => item.id == id)
        return friend
      }
    }
  },
  mutations: {
    increment(state){
      state.counter++
    },
    changeName(state,payload){
      state.name =  payload
    },
    incrementLevel(state){
      state.level++
    },
    [CHANGE_INFO](state,newInfo){
      state.level = newInfo.level
      state.name = newInfo.name
    },
    changeBanner(state,banner){
      state.banner = banner
    },
    changeRecommend(state,recommend){
      state.recommend = recommend
    },
  },
  actions: {
    incrementAction(context){
      console.log(context.commit); //用于提交mutation
      console.log(context.getters); //getters
      console.log(context.state); //state
      context.commit('increment')
    },
    changeNameAction(context,payload){
      console.log(payload);
      context.commit("changeName",payload)
    },
    // fetchHomeMultidataAction(context){
      // 1.返回Promise,给promise设置then
      // fetch("http://123.207.32.32:8000/home/multidata").then(res=>{
      //   res.json().then(data =>{
      //     console.log(data);
      //   })
      // })
      // 2.promise 链式调用
      // fetch("http://123.207.32.32:8000/home/multidata").then(res=>{
      //   return res.json()
      // }).then(data =>{
      //   console.log(data);
      // })
      // 3.await/async
      // const res = await fetch("http://123.207.32.32:8000/home/multidata")
      // const data = await res.json()
      // console.log(data);
      // context.commit('changeBanner',data.data.banner.list)
      // context.commit('changeRecommend',data.data.recommend.list)

    //   return new Promise(async (resolve,reject)=>{
    //     const res = await fetch("http://123.207.32.32:8000/home/multidata")
    //     const data = await res.json()
    //     context.commit('changeBanner',data.data.banner.list)
    //     context.commit('changeRecommend',data.data.recommend.list)
    //     resolve('aaaa')
    //   })
    // }
  },
  modules: {
    home: homeModule
    // a:{
    //   state(){
    //     return {

    //     }
    //   }
    // }
  }
})


// 持久化
// const store = createStore({
//   modules: { app },
//   plugins: [
//     VueXState({
//       key: "store",
//       paths: ["app"],
//     }),
//   ],
// });